import {useState, useRef} from 'react';
import {Image, Table, message} from 'antd';
import {useNavigate, useSearchParams} from 'react-router-dom';
import PageTable from '@/components/PageTable.tsx';
import Dialog from "@/components/Dialog.tsx";
import {checkTheWidthOfTheProgressPopUpBox} from "@/utils/index.ts";
import {getOACheckPerson} from "@/axios/apis.ts";

const MineTask = () => {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const [pendingOfficersVisible, setPendingOfficersVisible] = useState(false)
    const [oaAssigneeInfoResList, setOaAssigneeInfoResList] = useState([])
    const [dialogWidth, setDialogWidth] = useState('1260px')
    const [progressChart, setProgressChart] = useState<string>('')
    const [searchForm, setSearchForm] = useState({isAll: '0'});
    // 强制更新
    const tableRef = useRef(null);
    const lookForm = (record:object)=>{
        let params = new URLSearchParams()
        params.append('applyId', record.id)
        params.append('primaryKeyId', record.primaryKeyId)
        params.append('processInstanceId', record.processInstanceId)
        params.append('type', 'details')
        params.append('formPage', 'task')
        navigate(`/OAExamine/ViewForm?${params.toString()}`)
    }
    const approve = (record:object) => {
        if (record.approvalTime) {
            return message.warning('该条记录已审批')
        }
        let params = new URLSearchParams()
        params.append('applyId', record.id)
        params.append('primaryKeyId', record.primaryKeyId)
        params.append('processInstanceId', record.processInstanceId)
        params.append('type', 'details')
        params.append('formPage', 'task')
        navigate(`/OAExamine/ViewsForm?${params.toString()}`)
    }
    const columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            render: (_1, _2, index) => <>{index + 1}</>,
            minWidth: 50,
            fixed: 'left',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <div className="table-options">
                    <span className="operation_style" onClick={() => lookForm(record)}>查看表单</span>
                    <span className="operation_style" onClick={() => approve(record)}>审批</span>
                    <span className="operation_style" onClick={() => {
                        const url: string = `${import.meta.env.VITE_APP_BASE_API}web/oa-web-api/process/img?processInstanceId=${record.processinstanceId}&time=${new Date().getTime()}`
                        setProgressChart(url)
                        checkTheWidthOfTheProgressPopUpBox(url).then(res => {
                            if (res) {
                                setDialogWidth(res)
                            }
                            setVisible(true)
                        })
                    }}>查看进度</span>
                </div>
            ),
            minWidth: 200,
            fixed: 'left',
        },
        {
            title: "流程编号",
            dataIndex: "processId",
            key: "processId",
        },
        {
            title: "流程类型",
            dataIndex: "processName",
            key: "processName",
        },
        {
            title: "所属机构",
            dataIndex: "organ",
            key: "organ",
        }, {
            title: "流程名称",
            dataIndex: "dynamicFields",
            key: "dynamicFields",
        }, {
            title: "申请时间",
            dataIndex: "applicantTime",
            key: "applicantTime",
        }, {
            title: "申请人",
            dataIndex: "showName",
            key: "showName",
        }, {
            title: "审批状态",
            dataIndex: "approvalStatus",
            key: "approvalStatus",
        },
    ];

    return (
        <>
            <PageTable
                columns={columns}
                reqestUrl="queryToDoTasks"
                searchForm={searchForm}
                ref={tableRef}
                setCurrentPageField={false}
                initPageNumber={0}
            />
            <Dialog title="查看进度" visible={visible} setVisible={setVisible} width={dialogWidth} onOk={() => {
                setVisible(false)
            }}>{progressChart ? <img src={progressChart} /> : null}</Dialog>
            <Dialog title="待审人员" visible={pendingOfficersVisible} setVisible={setPendingOfficersVisible} width={666}
                    onOk={() => {
                        setPendingOfficersVisible(false)
                    }} CancelBtnShow={false}>
                <Table size="middle" bordered={true} pagination={false} columns={[
                    {title: "部门", dataIndex: "orgName", key: "orgName",},
                    {title: "名字", dataIndex: "showName", key: "showName",},
                    {title: "邮箱", dataIndex: "email", key: "email",},
                ]} dataSource={oaAssigneeInfoResList} />
            </Dialog>
        </>
    );
};

export default MineTask;